<template>
    <div class="code-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>实训报告</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- <bread-crumb-back></bread-crumb-back> -->
        </div>
        <div class="content-box">
            <div class="" v-if="experimentReportVOList.length==0" style="text-align:center; margin-top:5%;">
                <img src="./../../assets/images/project_tips3.jpg" />
            </div>
            <div class="report-list" v-if="experimentReportVOList.length>0">
                <el-row>
                    <el-col v-for="(item, key, index) in experimentReportVOList" :key="key">
                        <router-link :to="{ path: '/student/trainingReportDetail', query: {reportId: item.reportId, userId:item.userId} }">
                            <div class="list-header" :class="{ 'blue' : item.color == 0, 'green': item.color == 1}">
                                <span>{{ item.reportName }}</span>
                            </div>
                            <div class="list-content">
                                <div class="list-content-box">
								    <p>教师姓名 : {{ item.userName }}</p>
                                    <p :title="item.reportEvaluation">案例评价：{{ item.reportEvaluation }}</p>
                                    <p>综合得分：{{ item.reportScore }}</p>
                                    <p >报告提交日期：<span v-if="item.uploadMark == 1 || item.uploadMark == 2">{{ item.updateTimeString }}</span></p>
                                    <div class="list-content-tag" v-if="item.uploadMark == 0 || item.uploadMark == null">未提交</div>
                                    <div class="list-content-tag active" v-else-if="item.uploadMark == 1">已提交</div>
                                    <div class="list-content-tag active" v-else>已评价</div>
                                </div>
                            </div>
                        </router-link>
                    </el-col>
                </el-row>
            </div>
        </div>
     </div>
</template>
<script>
    import BreadCrumbBack from '@/components/breadCrumbBack.vue'
    export default {
        components: {
            BreadCrumbBack
        },
        data () {
            return {
                experimentReportVOList: ''
            }
        },
        created () {
            this.init()
        },
        methods: {
            init() {
                let self = this
                self.$http.post('/dataplatform/basis/functions/report/s/stuReportList').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.experimentReportVOList = res.data.experimentReportVOList
                        if (self.experimentReportVOList.length == 0) {
                            $('.content-box').height($('.content-container').height() - 150)
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            }
        }
    }
</script>
